/* eslint-disable @typescript-eslint/no-unused-vars */
import PageLayout from "@/layout/PageLayout";
import { Field, Icon } from "@antmjs/vantui";
import { View } from "@tarojs/components";
import React from "react";
import PolicieRegulaItem from "../PolicieRegulaItem";

const mockData: any = [
  {
    id: "1",
    title: "食用农产品市场销售质量安全监督管理办法",
    area: "全国",
    releaseDate: "2023-09-02",
    type: "通用",
  },
  {
    id: "2",
    title: "食用农产品市场销售质量安全监督管理办法",
    area: "全国",
    releaseDate: "2023-09-02",
    type: "通用",
  },
  {
    id: "3",
    title: "食用农产品市场销售质量安全监督管理办法",
    area: "全国",
    releaseDate: "2023-09-02",
    type: "通用",
  },
  {
    id: "4",
    title: "食用农产品市场销售质量安全监督管理办法",
    area: "全国",
    releaseDate: "2023-09-02",
    type: "通用",
  },
];

type TPolicieRegulaListProps = {
  setShowAreaSelector: React.Dispatch<React.SetStateAction<boolean>>;
  setShowTypeSelector: React.Dispatch<React.SetStateAction<boolean>>;
};

const PolicieRegulaList: React.FC<TPolicieRegulaListProps> = ({
  setShowAreaSelector,
  setShowTypeSelector,
}) => {
  return (
    <PageLayout>
      <>
        <View className="w-full py-2 h-[100vh]">
          {/* 搜索 */}
          <View className="flex flex-row items-center justify-between gap-2 flex-nowrap w-full h-[64px]">
            <View className="flex flex-row items-center justify-between flex-1 h-full px-4 rounded-full bg-slate-100 flex-nowrap">
              <Icon name="search" size="20px" className="icon"></Icon>
              <View className="flex-1">
                <Field
                  placeholder="搜索"
                  border={false}
                  style="width:100%;height:32px;backgroundColor:rgb(241,245,249)"
                />
              </View>
            </View>
            <View className="w-[120px] h-full rounded-full bg-slate-200 flex flex-row flex-nowrap justify-center items-center text-xs">
              重置
            </View>
          </View>
          {/* 筛选 */}
          <View className="flex flex-row items-center mt-4 flex-nowrap">
            <View
              className="flex flex-row items-center justify-center flex-1 gap-1 flex-nowrap"
              onClick={() => setShowAreaSelector(true)}
            >
              <View>适用地区</View>
              <Icon
                name="arrow-down"
                size="20px"
                className="icon"
                color="#ccc"
              ></Icon>
            </View>
            <View
              className="flex flex-row items-center justify-center flex-1 gap-1 flex-nowrap"
              onClick={() => setShowTypeSelector(true)}
            >
              <View>主体类型</View>
              <Icon
                name="arrow-down"
                size="20px"
                className="icon"
                color="#ccc"
              ></Icon>
            </View>
          </View>
          {/* 列表 */}
          <View className="mt-4">
            {mockData?.map((_item: any) => (
              <PolicieRegulaItem key={_item.id} info={_item} />
            ))}
          </View>
        </View>
      </>
    </PageLayout>
  );
};

export default PolicieRegulaList;
